<!--提供方管理页面-->
<template>
    <div>
        <el-row>
            <el-col :span="22" class="toolbar marginTop10px" id="serachId">
                <el-form :model="conditionForm" ref="conditionFormRef">
                    <!--<el-button plain @click="dialogFormVisible = true" style="float:left">新增</el-button>-->
                    <el-form-item style="float:right">
                        <el-button type="primary" size="small" @click="onSearch">&nbsp;搜索</el-button>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 15px;">
                        <el-input v-model="conditionForm.keyword" size="small" auto-complete="off" placeholder="关键字" @keyup.enter.native="onSearch"></el-input>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 15px;" >
                        <el-select v-model="conditionForm.searchType" size="small"  placeholder="请选择">
                            <el-option v-for="item in searchTypeOptions" :key="item.value"
                                    :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 15px;">
                        <el-select v-model="conditionForm.operateType" size="small" placeholder="操作类型">
                            <el-option v-for="item in operateType" :key="item.value"
                                    :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row class="toolbar">
            <el-col :span="23" class="titleLineSymbolTwo">
                <el-table :data="resultDate.data.list" stripe style="width: 100%">
                    <el-table-column type="index" label="序号" min-width="50"></el-table-column>
                    <el-table-column prop="id" label="记录标识" min-width="120"></el-table-column>
                    <el-table-column prop="userName" label="用户名" min-width="110"></el-table-column>
                    <el-table-column prop="terminalId" label="终端标识" min-width="120" ></el-table-column>
                    <el-table-column prop="operateType" label="操作类型" min-width="160" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="organization" label="部门名称" min-width="120"></el-table-column>
                    <el-table-column prop="module" label="操作模块" min-width="100" ></el-table-column>
                    <el-table-column prop="operateTime" label="操作时间" min-width="160" :formatter="formatCommDatas"></el-table-column>
                    <!--<el-table-column prop="userSerialNo" label="操作者标识" min-width="150"></el-table-column>-->
                    <!--<el-table-column prop="organizationId" label="单位机构代码" min-width="180"></el-table-column>-->
                    <!--<el-table-column prop="operateCondition" label="操作条件" min-width="180" ></el-table-column>-->
                    <!--<el-table-column prop="operateResult" label="操作结果" min-width="160" :formatter="formatCommDatas"></el-table-column>-->
                    <!--<el-table-column prop="operateName" label="操作名称" min-width="180" ></el-table-column>-->
                    <!--<el-table-column prop="resultCode" label="结果码" min-width="100" ></el-table-column>-->
                    <!--<el-table-column prop="regId" label="系统标识" min-width="120" ></el-table-column>-->
                    <el-table-column label="操作" min-width="150"  fixed="right" >
                        <template slot-scope="scope">
                            <!--<el-button size="small" @click="showUpdateForm(scope.$index, scope.row)">编辑</el-button>-->
                            <!--<el-button type="text" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
                            <el-button type="text" size="small" @click="showViewDetails(scope.$index, scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="23" class="marginTop10px">
                <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"
                            :current-page="resultDate.data.pageNum"
                            :page-size="resultDate.data.pageSize" :total="resultDate.data.total">
                </el-pagination>
            </el-col>

            <!--新增界面-->
            <el-dialog title="新增服务方" :visible.sync="dialogFormVisible" width="50%" :before-close="handleClose" :modal-append-to-body="false">
                <el-form :model="addForm" ref="addFormRef" :rules="frormRules">
                    <el-form-item label="服务提供商标识" :label-width="formLabelWidth" prop="serialNo">
                            <el-input v-model="addForm.serialNo" auto-complete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="服务提供商名字" :label-width="formLabelWidth" prop="provider">
                        <el-input v-model="addForm.provider" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" :label-width="formLabelWidth" prop="contacts">
                        <el-input v-model="addForm.contacts" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" :label-width="formLabelWidth" prop="contactsTel">
                        <el-input v-model="addForm.contactsTel" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('addFormRef')">确 定</el-button>
                </div>
            </el-dialog>

            <!--编辑界面-->
            <el-dialog title="编辑服务方" :visible.sync="updateFormVisible" width="50%" :before-close="handleClose" :modal-append-to-body="false">
                <el-form :model="updateForm" ref="updateFormRef" :rules="frormRules">
                    <el-form-item label="服务提供商标识" :label-width="formLabelWidth" prop="serialNo">
                        <el-input v-model="updateForm.serialNo" auto-complete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="服务提供商名字" :label-width="formLabelWidth" prop="provider">
                        <el-input v-model="updateForm.provider" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" :label-width="formLabelWidth" prop="contacts">
                        <el-input v-model="updateForm.contacts" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" :label-width="formLabelWidth" prop="contactsTel">
                        <el-input v-model="updateForm.contactsTel" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doUpdate('updateFormRef')">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 查看详情 -->
            <Modal v-model="detailsVisible" title="详情" width='50%' :before-close="handleClose">
                <el-card>
                    <el-form :model="updateForm" ref="updateFormRef">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="管理单位名称" :label-width="formLabelWidth">
                                    <el-input v-model="updateForm.organization" auto-complete="off" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="用户名" :label-width="formLabelWidth">
                                    <el-input v-model="updateForm.userName" auto-complete="off" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item label="操作条件" :label-width="formLabelWidth">
                            <el-input v-model="updateForm.operateCondition" auto-complete="off" :disabled="true"></el-input>
                        </el-form-item>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="操作时间" :label-width="formLabelWidth">
                                    <el-input v-model="updateForm.operateTime" auto-complete="off" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="操作类型" :label-width="formLabelWidth">
                                    <el-input v-model="updateForm.operateType" auto-complete="off" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="操作模块" :label-width="formLabelWidth">
                                    <el-input v-model="updateForm.module" auto-complete="off" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="操作名称" :label-width="formLabelWidth">
                                    <el-input v-model="updateForm.operateName" auto-complete="off" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="结果码" :label-width="formLabelWidth">
                                    <el-input v-model="updateForm.resultCode" auto-complete="off" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="操作结果" :label-width="formLabelWidth">
                                    <el-input v-model="updateForm.operateResult" auto-complete="off" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="系统标识" :label-width="formLabelWidth">
                                    <el-input v-model="updateForm.regId" auto-complete="off" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="终端标识" :label-width="formLabelWidth">
                                    <el-input v-model="updateForm.terminalId" auto-complete="off" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="detailsVisible = false">关 闭</el-button>
                </div>
            </Modal>
        </el-row>
    </div>
</template>
<script>

    import {operLog_add, operLog_del, operLog_searchByCondition, operLog_update} from '../api/api.js';
    import utils from '../api/utils.js';
    export default {
        data() {
            return {
                resultDate: {data:{total:0, pageNum: 0}},// 列表数据对象
                formLabelWidth: '120px',// 新增界面label大小
                addForm: {},//新增界面数据
                dialogFormVisible: false,//新增界面是否显示
                frormRules: { // 界面校验规则
                    serialNo: [
                        { required: true, message: '请输入唯一标识', trigger: 'blur' }
                    ],
                    provider: [
                        { required: true, message: '请输入服务提供商名字', trigger: 'blur' }
                    ],
                    contacts: [
                        { required: true, message: '请输入联系人名称', trigger: 'blur' }
                    ],
                    contactsTel: [
                        { required: true, message: '请输入联系人电话', trigger: 'blur' }
                    ],
                },
                updateForm:{},// ---------  更新
                updateFormVisible:false,
                conditionForm: {searchType: "", keyword: "", pageSize: 5,operateType:''},
                searchTypeOptions: [{
                    value: 'userSerialNo',
                    label: '用户标识'
                }, {
                    value: 'userName',
                    label: '用户名'
                }, {
                    value: 'all',
                    label: '全部',
                }],
                operateType: [{
                    value: 1,
                    label: '查询'
                }, {
                    value: 2,
                    label: '新增'
                }, {
                    value: 3,
                    label: '修改',
                }, {
                    value: 4,
                    label: '删除',
                }, {
                    value: '',
                    label: '全部',
                }],
                detailsVisible: false,
            };
        },
        methods: {
            handleCurrentPageChange: function (currentPage) {// 翻页动作
                this.currentPage = currentPage;
                this.onSearch();// 翻页后刷新页面数据
            },
            handleClose(done) { // 新增界面关闭事件
                this.$confirm('确认关闭？',"提示").then(_ => {done();}).catch(_ => {});
            },
            submitForm(formName) { // 新增界面提交事件
                let params = Object.assign({}, this.$refs[formName]._props.model);
                console.log(params);
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            pro_add(params).then(res=>{
                                console.log(res.data.msg);
                                this.$message.success(res.data.msg);
                                if(res.data.code=='S100101'){
                                    this.addForm = {};
                                    this.onSearch();
                                }
                            }).catch(err=>{
                                this.$message.error("系统异常");
                                console.log(err);
                            });
                            this.dialogFormVisible = false;
                        });
                    }
                });
            },
            // 查询
            onSearch(){  // 发出列表请求，并更新当前页面数据
                var _this = this
                _this.conditionForm.pageNum=_this.currentPage;
                operLog_searchByCondition(_this.conditionForm)
                    .then(res => {
                        _this.resultDate = res.data;
                    }).catch(function (error) {
                        console.log(error);
                        this.$message.warning('系统异常 ');
                    });
            },
            //删除
            handleDel (index, row) { // 数据项删除操作
                this.$confirm('是否删除当前该记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    operLog_del(row.id).then((res) => {
                        if(res.data.code=='S100101'){
                            this.$message.success('删除成功!');
                            this.onSearch();
                        }else{
                            this.$message.warning('删除失败! '+res.data.msg);
                            this.onSearch();
                        }
                    }).catch((res) => {
                        this.$message.error('删除失败!');
                    });
                })
            },
            showViewDetails(index, row){
                console.log(row);
                this.updateForm = {};
                this.detailsVisible = true;
                this.updateForm = Object.assign({}, row);
                this.updateForm.operateType = this.formatCommDatas(this.updateForm, {'property':'operateType'});
                this.updateForm.operateResult = this.formatCommDatas(this.updateForm, {'property':'operateResult'});
            },
            showUpdateForm(index, row){
                this.updateForm={};
                this.updateFormVisible = true;
                this.updateForm = Object.assign({}, row);
            },
            doUpdate(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            pro_update(this.updateForm).then((res) => {
                                if(res.data.code=='S100101'){
                                    this.$message.success('更新成功!');this.onSearch();
                                }else{
                                    this.$message.warning('更新失败! '+res.data.msg);this.onSearch();
                                }
                            }).catch((res) => {
                                this.$message.error('更新失败!');
                            });
                            this.updateFormVisible = false;
                        });
                    }
                });
            },
            formatCommDatas(row, column){
                return utils.formatCommDatas(row,column);
            }
        },
        computed: {

        },
        created() {

        },
        mounted(){
            this.onSearch();
        }


    };
</script>


